﻿<script src="~/Scripts/jquery-easyui-extensions/selector/common/jeasyui.extensions.dialog.sealed.sample.js"></script>
<link href="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.loading.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.isEasyUI.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.current.js"></script>
<link href="~/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/toolbar/jeasyui.extensions.toolbar.js"></script>
<script src="~/Scripts/jquery-easyui-extensions/selector/common/jeasyui.extensions.selector.base.js"></script>
<link href="~/Scripts/jquery-easyui-extensions/selector/jeasyui.extensions.selector.css" rel="stylesheet" />
<script src="~/Scripts/jquery-easyui-extensions/selector/jeasyui.extensions.selector.treeDblDatagrid.js"></script>

<div class="easyui-panel" data-options="fit:true,border:false,title:'本演示是完整版，支持扩展的toolbar插件'" style="padding:20px;">
    选中项的Value：<input type="text" id="ID" name="ID" class="easyui-textbox" data-options="width:350,multiline:true,height:40" />
    <br /><br />
    选中项的Text：<input type="text" id="Name" name="Name" class="easyui-textbox" data-options="width:350,multiline:true,height:40" />
    <br />
    <br />
    <div style="border:1px solid red;width:500px;height:80px;text-align:center;padding:4px;line-height:40px;">
        <input type="radio" id="ss1" name="ss" checked="checked" value="true" /><label for="ss1">单选</label>
        <input type="radio" id="ss2" name="ss" value="false" /><label for="ss2">多选</label>
        <span style="color:red;font-weight:bold;">单/多选设置，只有通过以下按钮设置后才有效。</span>
        <br />
        <a id="btn2" class="easyui-linkbutton" data-options="iconCls:'icon-add'">清空已选信息并设置选择框的单/多选</a>
    </div>
    <br />
    <a id="btn1" class="easyui-linkbutton" data-options="iconCls:'icon-add'">打开treeDblDatagrid选择框</a>
    当前选择框为<span id="spanSingle" style="color:red;font-weight:bold;">单选</span>
    <br /><br />
    <a class="easyui-linkbutton" href="javascript:window.location.href = '/Selector/TreeDblDatagridDemo?full=false&data=local'" data-options="iconCls:'icon-reload'">查看[不带工具条、本地数据无分页的选择器]使用演示</a>
    <br /><br />
    <a class="easyui-linkbutton" href="javascript:window.location.href = '/Selector/TreeDblDatagridDemo?full=true&data=remote'" data-options="iconCls:'icon-reload'">查看[带工具条、后台数据源分页的选择器]使用演示</a>
</div>

<script>
    $(function () {
        var single = true;

        $("#btn2").click(function () {
            $("#ID").textbox("setValue", "");
            $("#Name").textbox("setValue", "");
            single = $.string.toBoolean($("[name='ss']:checked").val());
            $("#spanSingle").text(single ? "单选" : "多选");
        });

        function fill(data) {
            if (!data) { return; }
            if ($.isArray(data)) {
                $("#ID").textbox("setValue", $.array.map(data, function (item) { return item.ID }).join(","));
                $("#Name").textbox("setValue", $.array.map(data, function (item) { return item.RealName }).join(","));
            } else {
                $("#ID").textbox("setValue", data.ID);
                $("#Name").textbox("setValue", data.RealName);
            }
        }

        $("#btn1").click(function () {

            var selected = $("#ID").textbox("getValue");

            var btnId = "btn" + $.util.guid("N");
            var toolbar = [
                    { type: "label", options: { text: "姓名：" } },
                    {
                        type: "textbox", options: {
                            name: "realName", width: 120,
                            keydown: function (event, t) {
                                if (event.keyCode == 13) {
                                    $(t).find("#" + btnId).click();
                                    event.preventDefault();
                                }
                            }
                        }
                    },
                    {
                        type: "button", options: {
                            text: "查询", iconCls: "icon-search", id: btnId,
                            onclick: function (t) {
                                // TreeDblDataGrid 比较特殊，因为 treeOptions 中 onSelectQueryer 的存在，所以存在天然的查询器
                                // 无论 datagrid 的 url 是本地 json 文件地址，或者是指向后台的 url 地址，都不需要额外指定查询器
                                $.easyui.showSelector.helper.doSearch($(t), "TreeDblDataGrid");
                            }
                        }
                    }
            ];

            var dia = $.easyui.showSelector.treeDblDatagrid({
                title: "测试选择",
                width: 580,
                height: 450,
                onEnter: function (row) {
                    fill(row);
                },
                extToolbar: true,
                selected: selected,
                treeWidth: 190,
                treeTitle: "组织结构列表",
                treeOptions: {
                    method: "get",
                    url: "/Jsons/tree/tree-selector-data.json",
                    // 如果触发 select 时，只需要 node.id 作为参数，则不需要指定 onSelectParamer，因为默认就是 return { nodeId: node.id };
                    // 这里写出来是为演示给读者，可注释该属性，功能不会影响；
                    onSelectParamer: function (node) { return { nodeId: node.id }; },
                    // 当 datagrid 的 url 是本地 json 文件地址时，才需要指定 onSelectQueryer 来手动筛选数据；
                    // 如果 datagrid 的 url 是指向后台的 url 地址，不需要指定 onSelectQueryer 属性，会自动调用 datagrid.datagrid("load", params);
                    onSelectQueryer: function (params, datagrid) {
                        $.getJSON("/Jsons/datagrid/datagrid-selector-data.json", function (data) {
                            datagrid.datagrid("loadData", $.array.filter(data, function (item) { return item.OrganID == params.nodeId && $.string.contains(item.RealName, params.realName); }));
                        });
                    }
                },
                datagridOptions: {
                    singleSelect: single,
                    method: "get",
                    url: "/Jsons/datagrid/datagrid-selector-data.json",
                    idField: 'ID',
                    columns: [[
                        { field: 'ID', title: '工号', width: 90 },
                        { field: 'RealName', title: '姓名', width: 90 }
                    ]],
                    toolbar: toolbar,
                    queryParams: { first: true },
                    onBeforeLoad: function (params) { return !params.first; },
                    selectedUrl: "/Jsons/datagrid/datagrid-selector-data.json",
                    selectedMethod: "get",
                    // 当 selectedUrl 是本地 json 文件地址时，才需要指定 selectedFilter 来手动筛选数据；
                    // 如果 selectedUrl 是指向后台的 url 地址，不需要指定 selectedFilter 属性，因为不需要对 selectedUrl 返回的数据做二次处理；
                    selectedFilter: function (data, seled) { return $.array.filter(data, function (item) { return $.array.contains(seled, item.ID); }); }
                }
            });
        });

        top.window.$("#home-layout").layout("collapse", "west").layout("collapse", "east");
    });
</script>